<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../libs/three.js"></script>
    <script src="../libs/OrbitControls.js"></script>  -->
    <!-- <script src="../libs/three.js"></script> -->
    <!-- <script src="../libs/OrbitControls.js"></script>  -->
    <!-- <script src="../libs/PointerLockControls.js"></script>  -->
</head>

<body>
    <div id="container" background="Black"></div>
    <script type="module" src="shader_cornellbox.js"></script>
    <br>
    <a href="../index.html">返回主页</a>


    <script id="vertexShader" type="x-shader/x-vertex">
        precision mediump float;
        precision mediump int;

        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;

        attribute vec3 position;
        attribute vec4 color;

        varying vec3 vPosition;
        varying vec4 vColor;

        void main() {
            vPosition = position;
            vColor=color;
            gl_Position = projectionMatrix * modelViewMatrix*vec4(position,1.0);
        } 
    </script>


    <script id="fragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        precision mediump int;

        uniform float time;

        varying vec3 vPosition;
        varying vec4 vColor;

        void main(){
            vec4 color=vec4(vColor);
            color.r += sin(vPosition.x*10.0+time)*0.5;
            gl_FragColor = color;
        }
    </script>
</body>

</html>